<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>SUI-demo</title>
	<link rel="stylesheet" href="css/sm.css">
	<link rel="stylesheet" href="css/sm-extend.css">
</head>

<body>
	<!-- page集合的容器，里面放多个平行的.page，其他.page作为内联页面由路由控制展示 -->
	<div class="page-group">
		<!-- 单个page ,第一个.page默认被展示-->
		<div class="page">
			<!-- 标题栏 -->
			<header class="bar bar-nav">
				<a class="icon icon-me pull-left open-panel"></a>
				<h1 class="title">标题</h1>
			</header>

			<!-- 工具栏 -->
			<nav class="bar bar-tab">
				<a class="tab-item external active" href="#">
					<span class="icon icon-home"></span>
					<span class="tab-label">首页</span>
				</a>
				<a class="tab-item external" href="#">
					<span class="icon icon-star"></span>
					<span class="tab-label">收藏</span>
				</a>
				<a class="tab-item external" href="#">
					<span class="icon icon-settings"></span>
					<span class="tab-label">设置</span>
				</a>
			</nav>

			<!-- 这里是页面内容区 -->
			<div class="content">
				<div class="content-block">这里是content</div>
			</div>
		</div>

		<!-- 其他的单个page内联页（如果有） -->
		<div class="page">...</div>
	</div>

	<!-- popup, panel 等放在这里 -->
	<div class="panel-overlay"></div>
	<!-- Left Panel with Reveal effect -->
	<div class="panel panel-left panel-reveal">
		<div class="content-block">
			<p>这是一个侧栏</p>
			<p></p>
			<!-- Click on link with "close-panel" class will close panel -->
			<p><a href="#" class="close-panel">关闭</a></p>
		</div>
	</div>


	<!-- 默认必须要执行$.init(),实际业务里一般不会在HTML文档里执行，通常是在业务页面代码的最后执行 -->
	<script>$.init()</script>


	<script src="scripts/zepto.js"></script>
	<script src="scripts/sm.js"></script>
	<script src="scripts/sm-extend.js"></script>
</body>

</html>